// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
/* stylelint-disable declaration-no-important */
@black: #000000;
@white: #FFFFFF;

@text-gray-0: #1D1C23;
@text-gray-1: #1D1C23CC;
@text-gray-2: #1D1C2399;
@text-gray-3: #1D1C2359;
@text-blue: #3370ff;
@background-gray-0: #F7F7FA;
@background-gray-1: #F0F0F5;
@background-blue-0: #F1F2FD;
@icon-color: #6B6B75;
@border-color: #1D1C2314;

.run-tree {
  width: fit-content;
  margin-bottom: 32px;
}

.trace-graph {
  position: relative;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  box-sizing: border-box;
  height: 100%;
  padding: 16px 0 0;

  .trace-tabs {
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-direction: column;

    :global(.semi-tabs-content) {
      overflow: auto;
      display: flex;
      flex: 1;
      align-items: stretch;


      :global(.semi-tabs-pane) {
        width: 100%;
        height: 100%;
      }

      :global(.semi-tabs-pane-motion-overlay) {
        width: 100%;
        height: 100%;

        .run-tree {
          width: 100%;
        }
      }
    }
  }

  .tabs-bar {
    display: flex;
    gap: 20px;
    align-items: center;

    height: 32px;
    margin-bottom: 16px; // 16-5
    padding: 0 24px;

    .tab-bar {
      cursor: pointer;

      /* Header/header-6/EN-Semi Bold */
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      color: @text-gray-2;

      /* 137.5% */

      &.active {
        color: rgba(var(--coze-up-brand-9), 1);
      }
    }
  }
}

.run-tree-area {
  overflow: auto;
  display: flex;
  flex-direction: column;

  height: 100%;
  margin: 0;
}

